<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="apple-touch-fullscreen" content="YES" />
	<meta name="format-detection" content="telephone=no" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta http-equiv="Expires" content="-1" />
	<meta http-equiv="pragram" content="no-cache" />
	<!-- <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" /> -->

	<title>tab</title>
	<!-- <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> -->
	<!-- <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css"> -->
	<!-- <link rel="stylesheet" type="text/css" href="css/iscroll.css"> -->
	<link rel="stylesheet" href="css/index.css">
	<link rel="stylesheet" type="text/css" href="css/touchDemo.css">
</head>
<body onload="startup()">
		<div class="content1 show">
		<div id="wrapper">
	<div id="scroller">
		<div id="scroller-pullDown">
			<span id="down-icon" class="icon-double-angle-down pull-down-icon reverse_icon"></span>
			<span id="pullDown-msg" class="pull-down-msg">下拉刷新</span>
		</div>
		<div id="scroller-content">
			<ul>
				<li>Pretty row 1</li>
				<li>Pretty row 2</li>
				<li>Pretty row 3</li>
				<li>Pretty row 4</li>
				<li>Pretty row 5</li>
				<li>Pretty row 6</li>
				<li>Pretty row 7</li>
				<li>Pretty row 8</li>
				<li>Pretty row 9</li>
				<li>Pretty row 10</li>
				<li>Pretty row 11</li>
				<li>Pretty row 12</li>
				<li>Pretty row 13</li>
				<li>Pretty row 14</li>
				<li>Pretty row 15</li>
				<li>Pretty row 16</li>
				<li>Pretty row 17</li>
				<li>Pretty row 18</li>
				<li>Pretty row 19</li>
				<li>Pretty row 20</li>
				<li>Pretty row 21</li>
				<li>Pretty row 22</li>
				<li>Pretty row 23</li>
				<li>Pretty row 24</li>
				<li>Pretty row 25</li>
				<li>Pretty row 26</li>
				<li>Pretty row 27</li>
				<li>Pretty row 28</li>
				<li>Pretty row 29</li>
				<li>Pretty row 30</li>
				<li>Pretty row 31</li>
				<li>Pretty row 32</li>
				<li>Pretty row 33</li>
				<li>Pretty row 34</li>
				<li>Pretty row 35</li>
				<li>Pretty row 36</li>
				<li>Pretty row 37</li>
				<li>Pretty row 38</li>
				<li>Pretty row 39</li>
				<li>Pretty row 40</li>
			</ul>
		</div>
		<div id="scroller-pullUp">
			<span id="up-icon" class="icon-double-angle-up pull-up-icon"></span>
			<span id="pullUp-msg" class="pull-up-msg">上拉刷新</span>
		</div>
	</div>
</div>
		</div>
	<!-- <script type="text/javascript" src="js/phone.js"></script> -->
	<script type="text/javascript" src="js/jquery.js"></script>
	<!-- <script type="text/javascript" src='js/iscroll.js'></script> -->
	<!-- <script type="text/javascript" src="js/tabs.js"></script> -->
	<script type="text/javascript">
//	设置事件处理器
	function addli(){
		$("ul").empty();
	var ulStr = '';
	for(var i = 0; i < 40;i++){
		var str = '<li>Pretty '+ Math.floor(Math.random()*99+1) + '</li>';
		ulStr += str;
	}
	$("ul").append(ulStr);
}
	 function startup() {
	  var touchStart = 0;  //触屏开始点
	  var touchEnd = 0; //触屏解释点
	  var touchLength = 0; //touchmove距离
	  var scroller = document.querySelector('#scroller');
	  scroller.addEventListener("touchstart", function(event){
	  	// alert("touchstart");
	  	var touch = event.targetTouches[0];
	  	touchStart = touch.pageY;
	  	console.log(touch.pageY);
	  }, false);
	  scroller.addEventListener("touchmove", function(event){
	  	// alert("touchmove");
	  	var touch = event.targetTouches[0];
	  	touchLength = touch.pageY - touchStart;
	  	scroller.style.top = scroller.offsetTop + touch.pageY - touchStart + 'px';
	  	console.log(scroller.style.top);
	  	if( touchLength > 200){
	  		document.getElementById("pullDown-msg").innerHTML="释放刷新!";
	  	}
	  }, false);
	  scroller.addEventListener("touchend",function(event){
	  	// alert("touchend");
	  	touchStart = 0;
	  	var top = scroller.offsetTop;
	  	console.log(top);
	  	if (top > 100) {
	  		addli();
	  	};
	  	if (top > 0) {
	  		var time = setInterval(function(){
	  			scroller.style.top = scroller.offsetTop - 2 + 'px';
	  			if (scroller.offsetTop <= 0) {
	  				clearInterval(time);
	  			};
	  		},1)
	  	};
	  }, false);
	}
	  // function handleStart(event){
	  // 	alert("touchstart");
	  // }
	  // function handleEnd(){
	  // 	alert('touchend');
	  // }
	  // function handleCancel(){
	  // 	alert('touchcancel');
	  // }
	  // function handleLeave(){
	  // 	alert('touchleave');
	  // }
	  // function handleMove(){
	  // 	alert('touchmove');
	  // }
	</script>

</body>
</html>